<template>
	<view>
		<view class="page-container">
			<!-- 底层图片 -->
			<image src="/pages/Car/static/图层1@2x.png" class="bg-image" mode="widthFix" />
		
			<!-- 上层可显示的内容（如文字、按钮等） -->
			<view class="top-content">
				<view class="navigator">添加车辆</view>
				<view class="carView">
						<image src="/pages/Car/static/组 4@2x.png" class="img"></image>
						<view class="ipt">
						            <view class="form-group">
						                <view class="form-label">车辆类型</view>
						                <input type="text" class="form-input" placeholder="请选择" readonly>
						            </view>
						            
						            <view class="form-group">
						                <view class="form-label">车辆型号</view>
						                <input type="text" class="form-input" placeholder="请选择" readonly>
						            </view>
						            
						            <view class="form-group">
						                <view class="form-label">车牌号码</view>
						                <input type="text" class="form-input" placeholder="请输入您的车牌号">
						            </view>
						            
						            <view class="form-group">
						                <view class="form-label">车主姓名</view>
						                <input type="text" class="form-input" placeholder="请输入您的姓名">
						            </view>
						            
						            <view class="form-group">
						                <view class="form-label">电话号码</view>
						                <input type="text" class="form-input" placeholder="请输入您的手机号">
						            </view>
						            
						            <view class="form-group">
						                <view class="form-label">照片</view>
						                <view class="photo-upload">
						                    <view class="plus-icon">+</view>
						                    <view class="upload-text">上传车辆照片</view>
						                </view>
						            </view>
						</view>
				</view>
			</view>
			<view class="fixed-bottom-box">
				+ 添加新车辆
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style>
/* 父容器：用于约束子元素的定位范围 */
	.page-container {
		position: relative;
		/* 父容器相对定位，子元素可基于此绝对定位 */
		width: 100%;
		height: 100vh;
		/* 占满整个屏幕高度，可根据需求调整 */
	}

	/* 底层图片：z-index 设为较小值，确保在最底层 */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
		/* 层级最低，作为背景 */
	}

	/* 上层内容：z-index 设为较大值，覆盖在图片上方 */
	.top-content {
		position: relative;
		z-index: 2;
		/* 层级高于图片，可显示在图片上方 */
		color: #fff;
		/* 文字颜色 */
		padding: 30rpx;
	}
	.navigator {
		display: flex;
		justify-content: center;
	}
	
	.carView {
		height: 1000rpx;
		background-color: #fff;
		margin: 50rpx 15rpx 100rpx 15rpx;
		border-radius: 20rpx;
		padding-bottom: 100rpx;
	}
	/* 添加车辆 */
	.fixed-bottom-box {
		position: fixed;
		bottom: 10rpx;
		margin: 0 50rpx;
		height: 100rpx;
		width: 650rpx;
		height: 70rpx;
		font-size: 30rpx;
		color: white;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 3;
		padding-bottom: env(safe-area-inset-bottom); /* 适配安全区 */
		border-top: 1rpx solid #f5f5f5;
		background-color: #007AFF;
		border-radius: 50rpx;
	}
	.img{
		width: 500rpx;
		height: 300rpx;
		margin-left: 50rpx;
	}
	/* 输入框 */
	        .form-group {
	            display: flex;
	            align-items: center;
	            margin-bottom: 20px;
				margin-left: 20rpx;
				margin-right: 20rpx;
	        }
	        
	        .form-label {
	            background-color: #1e90ff;
	            color: white;
	            border-radius: 6px;
				height: 50rpx;
	            width: 60px;
	            text-align: center;
				line-height: 50rpx;
	            font-size: 10px;
	            margin-right: 15px;
	            flex-shrink: 0;
	        }
	        
	        .form-input {
	            flex: 1;
	            border: 1px solid #e0e0e0;
	            border-radius: 6px;
	            padding: 4px 15px;
	            font-size: 10px;
	            color: #333;
	        }
	        
	        .photo-upload {
	            border: 1px dashed #e0e0e0;
	            border-radius: 6px;
	            padding: 10px 15px;
	            text-align: center;
	            cursor: default;
	            color: #999;
	            display: flex;
	            flex-direction: column;
	            align-items: center;
	            justify-content: center;
	            max-height: 60px;
	        }
	        
	        .plus-icon {
	            font-size: 32px;
	            color: #1e90ff;
	        }
	        
	        .upload-text {
	            font-size: 14px;
	        }
</style>
